{% extends "layout.html" %}

{% block title %}首页 - 股票实时AI分析系统{% endblock %}

{% block content %}
<div class="jumbotron">
    <h1 class="display-4">欢迎使用股票实时AI分析系统</h1>
    <p class="lead">这是一个结合AI和量化分析的股票分析系统，能够提供实时的市场分析和投资建议。</p>
    <hr class="my-4">
    <p>您可以在这里查看系统监控的股票、分析结果、系统运行状态和日志。</p>
    <div class="row mt-4">
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">股票列表</h5>
                    <p class="card-text">查看系统监控的股票列表及其最新分析结果。</p>
                    <a href="/stocks" class="btn btn-primary">查看股票</a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">系统状态</h5>
                    <p class="card-text">查看系统运行状态、健康检查结果和性能指标。</p>
                    <a href="/status" class="btn btn-primary">查看状态</a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">系统日志</h5>
                    <p class="card-text">查看系统运行日志，实时监控系统动态。</p>
                    <a href="/logs" class="btn btn-primary">查看日志</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mt-4">
    <div class="card-header">
        系统概览
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div id="system-status">
                    <h5>系统状态</h5>
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div id="recent-analysis">
                    <h5>最近分析</h5>
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 加载系统状态
        fetch('/api/health')
            .then(response => response.json())
            .then(data => {
                const statusDiv = document.getElementById('system-status');
                statusDiv.innerHTML = `
                <h5>系统状态</h5>
                <p class="fw-bold ${data.status === 'healthy' ? 'text-success' : 'text-warning'}">
                    ${data.status === 'healthy' ? '健康' : '降级'}
                </p>
                <ul class="list-group">
                    <li class="list-group-item">数据库: 
                        <span class="${data.components.database === 'healthy' ? 'text-success' : 'text-danger'}">
                            ${data.components.database === 'healthy' ? '正常' : '异常'}
                        </span>
                    </li>
                    <li class="list-group-item">数据收集器: 
                        <span class="${data.components.data_collector === 'healthy' ? 'text-success' : 'text-danger'}">
                            ${data.components.data_collector === 'healthy' ? '正常' : '异常'}
                        </span>
                    </li>
                    <li class="list-group-item">AI模型: 
                        <span class="${data.components.ai_model === 'healthy' ? 'text-success' : 'text-danger'}">
                            ${data.components.ai_model === 'healthy' ? '正常' : '异常'}
                        </span>
                    </li>
                </ul>
                <p class="mt-2 text-muted">最后检查: ${data.last_check}</p>
            `;
            })
            .catch(error => {
                document.getElementById('system-status').innerHTML = `
                <h5>系统状态</h5>
                <p class="text-danger">加载失败: ${error}</p>
            `;
            });

        // 加载最近分析
        fetch('/api/stocks')
            .then(response => response.json())
            .then(data => {
                const recentDiv = document.getElementById('recent-analysis');
                if (data && data.length > 0) {
                    let html = `<h5>最近分析</h5><div class="list-group">`;
                    for (let i = 0; i < Math.min(5, data.length); i++) {
                        html += `
                        <a href="/stock/${data[i].code}" class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">${data[i].code}</h6>
                                <small>${data[i].last_updated}</small>
                            </div>
                            <p class="mb-1">${data[i].summary ? data[i].summary.substring(0, 100) + '...' : '无摘要'}</p>
                            <small>策略: ${data[i].strategy?.action || '无策略'}</small>
                        </a>
                    `;
                    }
                    html += `</div>`;
                    recentDiv.innerHTML = html;
                } else {
                    recentDiv.innerHTML = `<h5>最近分析</h5><p>暂无分析数据</p>`;
                }
            })
            .catch(error => {
                document.getElementById('recent-analysis').innerHTML = `
                <h5>最近分析</h5>
                <p class="text-danger">加载失败: ${error}</p>
            `;
            });
    });
</script>
{% endblock %}